<template>
<div class="index-container ec-container">
    <!-- 搜索条件 -->
    <el-row :gutter="10">
        <div class="search-wrap">
            <div class="client-number">
                <span class="title">渠道：</span>
                <el-select class="w50" v-model="filter.channelId" placeholder="请选择" @change="queryPageData">
                    <el-option v-for="item in channelOption" :key="item.id" :label="item.channelName" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="client-number">
                <span class="title">平台：</span>
                <el-select class="w50" v-model="filter.platformId" placeholder="请选择" @change="queryPageData">
                    <el-option v-for="item in platformOption" :key="item.id" :label="item.platformName" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="client-number">
                <span class="title">店铺名称：</span>
                <el-input class="w50 h40" v-model="filter.storeName" placeholder="店铺名称"></el-input>
            </div>
            <div class="client-number">
                <span class="title">店铺编码：</span>
                <el-input class="w50 h40" v-model="filter.storeId" placeholder="店铺编码"></el-input>
            </div>
        </div>
    </el-row>

    <!-- 新老客户活跃数据 -->
    <el-row :gutter="10">
        <!-- 新老客户统计数 -->
        <el-col :span="16" class="left-wrap">
            <div class="top-wrap">
                <div class="client-number">
                    <h2>客户数（截止当前）</h2>
                    <h3>{{customNow}}</h3>
                </div>
                <div class="client-number">
                    <h2>粉丝数（截止当前）</h2>
                    <h3>{{fansNow}}</h3>
                </div>
                <div class="client-number">
                    <h2>活跃客户数（截止当前）</h2>
                    <h3>{{active}}</h3>
                </div>
            </div>
            <div class="bottom-wrap">
                <p>以下指标是截止昨天最新时间的数据，每天会更新；</p>
                <p>* 粉丝：微信关注人数，取openID的数；</p>
                <p>* 客户数：未注册的人数，即有购买但未注册和有可触达信息的人；</p>
                <p>* 活跃客户：近一年有有效购买的客户；</p>
                <p>* 活跃新客：近一年有有效购买且第一次购买在近一年的客户；</p>
                <p>* 活跃老客：近一年有有效购买，但一年前有购买记录的客户；</p>
            </div>
        </el-col>
        <!-- 统计表格 -->
        <el-col :span="8">
            <div id="topOrder" class="grid-content"></div>
        </el-col>
    </el-row>
    <!-- 创建时间部分 -->
    <el-row :gutter="10" class="time-wrap">
        <el-col :span='6'>
            <div class="wrap">
                <p class="title">创建日期</p>
            </div>
        </el-col>
        <el-col :span='6'>
            <div class="wrap">
                <p class="title">日期粒度切换</p>
            </div>
        </el-col>
        <el-col :span='12'>
            <div class="wrap">
                <p class="content">* 创建日期与日期粒度切换只影响报表【各平台客户分布】【客户发展趋势】</p>
            </div>
        </el-col>
    </el-row>

    <!-- 平台客户分布图 -->
    <el-row :gutter="10">
        <el-col :span="9">
            <div id="distribution" class="grid-content"></div>
        </el-col>
        <el-col :span="15">
            <div id="tendency" class="grid-content"></div>
        </el-col>
    </el-row>

</div>
</template>

<script>
export default {
    data() {
        return {
            merchantOptions: [{
                value: '1',
                label: '每日优鲜'
            }, {
                value: '2',
                label: '叮咚买菜'
            }],
            platformOption: [{
                value: '1',
                label: '天猫'
            }, {
                value: '2',
                label: '淘宝'
            }, {
                value: '3',
                label: '京东'
            }],
            channelOption: [{
                value: '1',
                label: '线上'
            }, {
                value: '2',
                label: '线下'
            }, ],
            platformValue: '',
            merchantValue: '',
            channelValue: '',
            filter: {
                channelId: null,
                platformId: null
            }, //筛选条件
            activeCustomData: [{
                    value: 1335,
                    name: '活跃新客户'
                },
                {
                    value: 3101,
                    name: '活跃老客户'
                },
            ],
            customNow: 0, //截止到当前的客户数
            fansNow: 0, //截止到当前的粉丝数
            active: 0, //截止当前活跃客户数
            platFormCustomData: {
                title: [],
                value: []
            },
            platFormCustomDataTitle: [],
            platFormCustomDataValue: [],
            customerDevelopment: {} //客户发展趋势
        };
    },
    mounted() {
        //this.drawLine(this);
        //加载渠道下拉框
        this.getChannelOption();
        //加载平台下拉框
        this.getPlatformOption();
        // //加载活跃新老客户占比饼图数据
        // this.getActiveCustomData();
        // //加载截止到当前客户数
        // this.getCustomNow(2);
        // //加载截止到当前粉丝数
        // this.getCustomNow(1);
        // //加载各平台客户分部数
        // this.getPlatFormCustom();
        this.queryPageData();
    },
    methods: {

        // 活跃_新老客占比
        drawLine(this_) {
            let topOrder = document.getElementById("topOrder");
            let myChartChina = this.$echarts.init(topOrder);
            let option = {
                title: {
                    text: "活跃_新老客占比"
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    top: 50,
                    data: ['活跃新客户', '活跃老客户']
                },
                series: [{
                    name: '活跃新客户',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: this_.activeCustomData
                }]
            };
            myChartChina.setOption(option);
        },

        // 各平台客户分布
        distribution(this_) {
            let distribution = document.getElementById("distribution");
            let myChartChina = this.$echarts.init(distribution);
            let option = {
                title: {
                    text: "各平台客户分布"
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: {
                    type: "value",
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    name: "",
                    type: "category",
                    data: this_.platFormCustomData.title
                },
                series: [{
                    name: "",
                    type: "bar",
                    data: this_.platFormCustomData.value
                }]
            };
            myChartChina.setOption(option);
        },

        // 客户发展趋势
        tendency(this_) {
            console.log(this_.customerDevelopment.time)
            let tendency = document.getElementById("tendency");
            let myChartChina = this.$echarts.init(tendency);
            let option = {
                title: {
                    text: "客户发展趋势"
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: this_.customerDevelopment.time,
                    axisTick: {
                        alignWithLabel: true
                    }
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: '客户发展数',
                    type: 'bar',
                    barWidth: '60%',
                    data: this_.customerDevelopment.number
                }]
            };
            myChartChina.setOption(option);
        },
        //加载渠道下拉框数据
        getChannelOption() {
            let this_ = this;
            this.utils.request.getChannelOption({}, function (res) {
                if (res.code == '0000') {
                    this_.channelOption = res.data;
                }
            })
        },
        getPlatformOption() {
            let this_ = this;
            this.utils.request.getPlatformOption({}, function (res) {
                if (res.code == '0000') {
                    this_.platformOption = res.data;
                }
            })
        },
        //加载页面上的数据
        queryPageData() {
            //加载活跃新老客户占比饼图数据
            this.getActiveCustomData();
            //加载截止到当前客户数
            this.getCustomNow();
            //加载各平台客户分部数
            this.getPlatFormCustom();
            //加载客户发展趋势
            this.getCustomerDevelopment();

        },
        //加载活跃新老客户占比饼状图数据
        getActiveCustomData() {
            let this_ = this;
            this.utils.request.getActiveCustomData(this_.filter, function (res) {
                if (res.code == '0000') {
                    this_.activeCustomData = res.data;
                    this_.drawLine(this_);
                }
            })
        },
        //加载截止到当前客户数
        getCustomNow() {
            let this_ = this;
            let params = this_.filter;
            this.utils.request.getCustomNow(params, function (res) {
                if (res.code == '0000') {
                    this_.customNow = res.data.custom;
                    this_.fansNow = res.data.fans;
                    this_.active = res.data.active;
                }
            })
        },
        //加载各平台客户分布数
        getPlatFormCustom() {
            let this_ = this;
            this.utils.request.getPlatFormCustom(this_.filter, function (res) {
                if (res.code == '0000') {
                    console.log(res.data)
                    this_.platFormCustomData = res.data;
                    this_.distribution(this_);
                }
            })
        },
        getCustomerDevelopment() {
            let this_ = this;
            this.utils.request.getCustomerDevelopment(this_.filter, function (res) {
                if (res.code == '0000') {
                    console.log(res.data)
                    this_.customerDevelopment = res.data;
                    this_.tendency(this_);
                }
            })
        }

    }
};
</script>

<style lang="scss" scoped>
@import "../../../../assets/css/dataCenterEcharts.css";

p {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.ec-container {
    .info {
        .grid-content {
            height: 400px;
        }
    }

    /* 左侧客户统计数量 */
    .left-wrap {
        height: 400px;
        padding-top: 10px;

        .top-wrap {
            width: 100%;
            height: 240px;
            display: flex;
            justify-content: space-around;

            .client-number {
                width: 32%;
                text-align: center;
                background-color: #fff;
                color: #333;
                padding-top: 50px;
            }
        }

        .bottom-wrap {
            background-color: #fff;
            padding: 40px;
            margin: 10px 8px 0 10px;
        }
    }

    /* 时间 */
    .time-wrap {
        margin-top: 20px;

        .wrap {
            background-color: #fff;
            text-align: left;
            padding: 20px;

            .title {
                font-size: 20px;
                font-weight: 700;
                color: #333;
            }

            .content {
                padding: 5px 0;
            }
        }
    }

    .search-wrap {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-around;
        margin-top: 10px;

        .client-number {
            width: 24%;
            height: 70px;
            text-align: center;
            background-color: #fff;
            color: #333;
            margin-bottom: 10px;
            padding-top: 20px;

            .title {
                margin-right: 10px;
                font-weight: 500;
            }
        }
    }
}
</style>
